<template>
  <div>
    <el-dialog
      :title="title"
      width="652px"
      :visible.sync="isShow"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item label="审批结果" prop="auditResult">
          <el-select placeholder="请选择审批结果" v-model="form.auditResult" @change="changeResult" :disabled="isWatch">
            <el-option v-for="item in auditResultList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授信金额" prop="applyAmount" v-if="form.auditResult !== 0">
          <div class="flex">
            <el-input class="mr10" v-model="form.applyAmount" placeholder="请输入金额" :disabled="isWatch"></el-input>元
          </div>
        </el-form-item>
        <el-form-item label="授信有效期" prop="endDate" v-if="form.auditResult !== 0">
          <el-date-picker
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            v-model="form.endDate"
            :disabled="isWatch"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="利率" prop="interestRate" v-if="form.auditResult !== 0">
          <el-input placeholder="请输入利率" v-model="form.interestRate" :disabled="isWatch"></el-input>%
        </el-form-item>
        <el-form-item label="还款方式" v-if="form.auditResult !== 0">
          <el-input disabled v-model="form.way"></el-input>
        </el-form-item>
        <el-form-item label="审批意见" prop="rejectReason">
          <el-input
            type="textarea"
            maxlength="200"
            show-word-limit
            v-model="form.rejectReason"
            :disabled="isWatch"
            :rows="10"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="submit()">{{ btnText }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { onlyNumber } from '@/utils/validator.js'
export default {
  name: 'CreditExtensionPop',
  data() {
    const checkMoney = (rule, value, callback) => {
      if (!onlyNumber(value)) {
        callback(new Error('金额格式不对!'))
      } else if (Number(value) / 10000 > this.maxMoney) {
        if (this.form.auditType === 1) {
          callback(new Error('不可大于最高授信金额'))
        } else {
          callback(new Error('不可大于初审金额'))
        }
      } else {
        callback()
      }
    }
    const checkRate = (rule, value, callback) => {
      if (!onlyNumber(value)) {
        callback(new Error('利率格式不对!'))
      } else {
        callback()
      }
    }
    return {
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      rules: {
        auditResult: [{ required: true, message: '请选择审批结果' }],
        applyAmount: [{ required: true, message: '请输入授信金额' }, { validator: checkMoney }],
        endDate: [{ required: true, message: '请选择授信有效期', trigger: 'change' }],
        interestRate: [{ required: true, message: '请输入利率' }, { validator: checkRate }],
        rejectReason: [{ required: true, message: '请输入审批意见' }],
      },
      title: '',
      btnText: '保存',
      isShow: false,
      isWatch: false,
      auditResultList: [
        { name: '通过', id: 1 },
        { name: '拒绝', id: 0 },
      ],
      form: {
        applyId: '',
        auditType: null,
        auditResult: '',
        applyAmount: '',
        endDate: '',
        interestRate: '',
        way: '随借随还',
        rejectReason: '',
      },
      maxMoney: 0,
    }
  },
  methods: {
    show(item) {
      console.log('item=show=', item)
      this.isWatch = item.isWatch
      this.maxMoney = item.maxMoney
      this.form.applyId = item.id
      this.form.auditResult = item.auditResult
      this.form.auditType = item.auditType
      this.form.applyAmount = item.amount
      // this.form.applyAmount = item.applyAmount
      this.form.endDate = item.endDate
      this.form.interestRate = item.interestRate
      this.form.rejectReason = item.rejectReason
      this.title = item.title
      this.btnText = item.btnText || '保存'
      this.isShow = true
      console.log(this.form)
    },
    changeResult() {
      if (!this.form.auditResult) {
        this.form.applyAmount = ''
        this.form.endDate = ''
        this.form.interestRate = ''
      }
    },
    handleClose() {
      this.resetForm()
      this.$emit('closePop')
    },
    submit() {
      if (this.btnText === '返回') return (this.isShow = false)
      this.$refs['form'].validate(async valid => {
        if (!valid) return

        await this.submitRequest()
        this.resetForm()
        this.$emit('closePop', true)
      })
    },
    resetForm() {
      this.isShow = false
      this.maxMoney = 0
      this.form.applyId = ''
      this.form.auditType = null
      this.form.auditResult = ''
      this.form.applyAmount = ''
      this.form.endDate = ''
      this.form.interestRate = ''
      this.form.way = '随借随还'
      this.form.rejectReason = ''
      this.$refs['form'].resetFields()
    },
    async submitRequest() {
      await this.$http.post(`/credit_applys/${this.form.applyId}/audit`, this.form)
      this.$message.success('操作成功')
    },
  },
}
</script>

<style lang="scss" scoped>
.btn {
  width: 400px;
}
::v-deep {
  .el-input {
    width: 400px;
  }
  .el-input__inner {
    width: 400px;
  }
  .el-textarea {
    width: 400px;
  }
}
</style>
